<template>
	<view>
		<view class="transcribe-box  ">
			<view style="font-weight: 500;font-size: 34rpx;color: #EB5E00;"> 可参考阅读文案： </view>
			<view class="txt-box">
				<view class="">
					语音示例文字（在安静的环境下录制，以保证语音克隆效果）
					大家好哇！我叫 [你的名字]，是个地地道道的 [你的家乡] 人。
					我正在录制我的数字分身视频，以往，创作一条口播类的短视频对我来说是非常困难的，面对着镜头的我，经常张不开嘴，不知道说什么，以及等等的原因，现在有了这个工具之后，我不需要去写文案，也不用去搭建拍摄场景；我可以随时随地创作一条高质量的本人出镜短视频，不光可以用于我的企业宣传，甚至还可以用来带货，在之前，这对于我来说都是很困难的事情，现在只需要一部手机，有了它，再也不用焦虑每天拍什么了。
				</view>
			</view>
		</view>
		<uni-popup mask-background-color="rgba(0,0,0,0)" :animation="false" ref="popup" type="bottom"
			background-color="#fff" border-radius="20rpx 20rpx 0 0" :is-mask-click="false">
			<view class="transcribe-pop">
				<view v-if="status===0" @click="start()" class="zl-flex-col zl-col-center">
					<image style="width: 240rpx;" src="/static/clone/start.png" mode="widthFix"></image>
					<view style="color:#2E6ACE ;" class="zl-font-36 zl-font-500 zl-m-t-10"> 开始录音 </view>
				</view>
				<view v-if="status===1" @click="stop()" class="zl-flex-col zl-col-center">
					<image style="width: 240rpx;" src="/static/clone/end.png" mode="widthFix"></image>
					<view class="zl-font-36 zl-font-500 zl-m-t-10 zl-color-333"> 已录制<text
							style="color: #EF6F01;">{{seconds|getTime()}}</text>，建议录制10秒以上 </view>
				</view>
				<view class="cancel-cell" @click="cancelpop()"> 取消 </view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	const recorderManager = uni.getRecorderManager();
	export default {
		data() {
			return {
				seconds: 0,
				timer: '',
				status: 0, //0显示开始录制,1显示完成
				file: {},
				min: 10,
				max: 50
			};
		},
		filters: {
			getTime(time) {
				let m = parseInt(time / 60 % 60)
				m = m < 1 ? '' : m + '分'
				let s = parseInt(time % 60)
				s = s < 10 ? '0' + s + '秒' : s + '秒'
				// 作为返回值返回
				return m + s
			}
		},
		onLoad(opt) {
			this.$refs.popup.open()
			let self = this;
			recorderManager.onStop(function(res) {
				//上传文件后跳转
				self.status = 0;
				self.uploadAll(res)
				// getApp().globalData.temp_audio = this.file
				// uni.redirectTo({
				// 	url: '/pages/clone/upVoice'
				// })
			});
			recorderManager.onStart(function(res) {
				console.log(res, '开始了');
				uni.hideLoading()
				self.seconds = 0;
				self.status = 1;
				clearInterval(self.timer);
				self.timer = setInterval(self.startTimer, 1000);
			});
			// console.log(this.index, this.from)
			recorderManager.onError((res) => {
				this.$util.msg('请开启麦克风权限后,重启应用')
				self.seconds = 0
				clearInterval(self.timer);
				recorderManager.onPause(); // 先暂停录音
				recorderManager.stop(); // 停止录音
			});
		},
		methods: {
			cancelpop() {
				this.$refs.popup.close();
				this.stop();
				uni.navigateBack()
			},
			start() {
				console.log('点击开始', recorderManager);
				uni.showLoading({
					title: '正在准备录音...',
					icon: "none"
				})
				recorderManager.start({
					duration: 60000
				});
			},
			stop() {
				if (this.seconds < this.min) {
					return this.$util.msg(`音频时长需超过${this.min}秒！`)
				}
				recorderManager.stop();
				clearInterval(this.timer);
				this.$refs.popup.close();
			},
			startTimer() {
				this.seconds += 1;
				if (this.seconds >= 60) {
					this.seconds = 0;
					this.stop()
				}
			},
			async uploadAll(file) {
				console.log(file);
				let gs = ''
				var suffix = file.tempFilePath.substr(file.tempFilePath.lastIndexOf("."));
				var fileName = new Date().getTime() + '_' + this.$util.randomString(8) + suffix;
				let Index = file.tempFilePath.lastIndexOf(".");
				gs = file.tempFilePath.substr(Index + 1).toLowerCase();
				if (gs !== "mp3" && gs !== "m4a" && gs !== "wav" && gs !== "aac") {
					return this.$util.msg('素材格式不支持！');
				}
				if (file.fileSize > 1024 * 1024 * 20) {
					return this.$util.msg(`文件超出大小，请上传低于20兆的文件`)
				}
				// 获取上传签名
				var signRes = undefined;
				try {
					signRes = await this.api.clone.applyuploadvoice({
						fileName: fileName,
					});
					if (signRes.code != 0) {
						// #ifdef MP-WEIXIN
						wx.reportEvent("media_upload", {
							code: signRes.code,
							msg: signRes.msg
						})
						// #endif
						this.$util.msg(signRes.msg);
						return;
					}
				} catch (e) {
					//TODO handle the exception
					// #ifdef MP-WEIXIN
					wx.reportEvent("media_upload", {
						exception: JSON.stringify(e)
					})
					// #endif
					this.$util.msg('上传初始化失败！');
					return;
				}
				if (!signRes || !signRes.data) {
					// #ifdef MP-WEIXIN
					wx.reportEvent("media_upload", {
						api_exception: '获取签名失败！'
					})
					// #endif
					this.$util.msg('上传初始化失败！');
					return;
				}
				var sign = signRes.data;
				try {
					var uploadRes = await this.upload(sign, file.tempFilePath);
					getApp().globalData.temp_audio = uploadRes
					uni.redirectTo({
						url: '/pages/clone/upVoice'
					})
				} catch (e) {
					this.$util.msg(e.message);
				}
			},
			async upload(sign, tempFilePath) {
				return await new Promise((resolve, reject) => {
					var task = uni.uploadFile({
						url: sign.host,
						filePath: tempFilePath,
						fileType: 'audio',
						name: 'file',
						formData: sign.formData,
						timeout: 3600000,
						success: (res) => {
							console.log(res);
							if (res.statusCode === 200) {
								try {
									let data = JSON.parse(res.data)
									if (data.code === 0) {
										resolve(data.data);
									} else {
										reject(new Error(data.msg))
									}
								} catch (e) {
									reject(new Error('解析上传结果失败！'))
								}
							} else {
								reject(new Error('上传失败！'));
							}
						},
						fail: (err) => {
							// #ifdef MP-WEIXIN
							wx.reportEvent("media_upload", {
								aliyun_exception: JSON.stringify(err),
							})
							// #endif
							reject(new Error('上传失败！'));
						}
					});
					task.onProgressUpdate((pro) => {
						this.pro = pro.progress;
						// console.log(this.pro);
					});
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.transcribe-pop {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding-top: 20rpx;

		.luzhiIcon {
			width: 240rpx !important;
			height: 240rpx !important;
		}

		.cancel-cell {
			width: 750rpx;
			padding: 32rpx 0;
			background: #FFFFFF;
			text-align: center;
			font-size: 36rpx;
			color: #333333;
			border-top: 16rpx solid #F5F5F5;
			margin-top: 40rpx;
		}
	}

	.transcribe-box {
		width: 100%;
		height: 100vh;
		background-color: #000;
		color: #fff;
		padding: 40rpx 70rpx 0;

		.txt-box {
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 52rpx;
			margin-top: 30rpx;
		}
	}
</style>